<template>
	<view class="big-box flex-col align-center">
		<top-navigation bgColor='#FFFFFF00' :isBack="false">
			<!-- <text slot='center-slot' class="center-slot"></text> -->
			<view slot='right-slot' class=" justify-start">
				<view class="msg">
					<u-icon
				 @tap="$navto('/pages/msg/msg')"
				 name="email" size="48rpx" color="#FFF"></u-icon>
				 <view class="dot" v-if="userInfo.new_message == 1">
				 
				 </view>
				</view>
				
				<image @tap="$navto('/pages/mine/setting/setting')" class="center-slot"
					src="/static/images/my_setting.svg" mode=""></image>
			</view>
		</top-navigation>
		<u-toast ref="uToast"></u-toast>
		<view class="menu-box justify-between" @tap.prevent="$navto('/pages/mine/setting/user_details')">
			<view class="justify-start align-center">
				<image class="my-long" :src="userInfo.avatar" mode=""></image>
				<view class="">
					<view class="long-kuang-num">
						{{userInfo.nickname}}
					</view>
					<view class="my-long-kuang align-center" @tap.stop="myCopy(userInfo.code)">
						ID：{{userInfo.code}}
						<image class="copy-icon" src="/static/images/mine/copy.svg" mode=""></image>
					</view>
				</view>
			</view>
			<view class="justify-start align-center">
				<image class="jiantou" src="/static/images/mine/jiantou.svg" mode=""></image>
			</view>
		</view>
		<!-- 我的baby -->
		<view class="top-box flex-col justify-between" @tap="$navto('/pages/mine/long/long')">
			<view class="long-baby-box">
				<image class="long-baby" src="/static/images/mine/long-baby.png" mode="heightFix"></image>
			</view>
			<view class="my-qing-long">
				我的青龙
			</view>
			<view class="long-num">
				<u-count-to :startVal="0" color='#27ff92' fontSize='64rpx' :endVal="userInfo.dragon_num"></u-count-to>
				<text class="unit">只</text>
			</view>
		</view>
		<!-- 龙蛋 钻石 -->
		<view class="egg-crystal justify-between align-center">
			<view class="egg-crystal-box" @tap="$navto('/pages/mine/long/DragonEggList')">
				<view class="my-long-dan">
					龙蛋
				</view>
				<view class="dan-num">
					{{userInfo.egg_num}} <text class="unit">颗</text>
				</view>
			</view>
			<view class="egg-crystal-box1" @tap="$navto('/pages/mine/myOre/myOre')">
				<view class="my-long-dan">
					我的钻石
				</view>
				<view class="dan-num">
					<u-count-to :startVal="0.000000" :decimals="6" color='#FFF' :endVal="userInfo.crystal"></u-count-to>
					<text class="unit">个</text>
				</view>
			</view>
		</view>
		<view class="feature">
			<view class="justify-between">
				<view class="set-name">
					我的订单
				</view>
				<image class="jiantou" src="/static/images/mine/jiantou.svg" mode=""></image>
			</view>
			<view class="justify-between">
				<view @tap="onTips" class="feature-box flex-col align-center" v-for="item,index in hotList"
					:key="index">
					<image class="open-map-icon" :src="item.url" mode=""></image>
					<view class="title-order">
						{{item.title}}
					</view>
				</view>
			</view>

		</view>
		<view class="feature-app">
			<view class="justify-between">
				<view class="set-name">
					应用中心
				</view>
				<image class="jiantou" src="/static/images/mine/jiantou.svg" mode=""></image>
			</view>
			<view class="justify-start flex-wrap">
				<view @tap="getCategory(index)" class="feature-box-app flex-col align-center"
					v-show='index!=3 || userInfo.shop==1' v-for="item,index in appList" :key="index">
					<image class="open-map-icon" :src="item.url" mode=""></image>
					<view class="title-order">
						{{item.title}}
					</view>
				</view>
			</view>

		</view>
		<!-- 联系客服弹出层-->
	<!-- 	<u-popup :show="moneyShow" mode="center" @close="moneyShow=false" round="16rpx" bgColor='transparent'
			overlayOpacity='0.85'>
			<view class="popup-one-box flex-col align-center">
				<view class="need-kuang justify-between align-center">
					请先完善社交信息
				</view>
				<view class="popup-box-btn align-center justify-center" @tap="userSocial">
					{{'去完善'}}
				</view>
				
			</view>
		</u-popup> -->
		<!-- 联系客服弹出层-->
		<u-popup :show="moneyShow" mode="center" @close="moneyShow=false" round="16rpx" bgColor='transparent'
			overlayOpacity='0.7'>
			<view class="popup-one-box flex-col align-center">
		
				<view class="has-shuijing justify-center">
					请先完善社交信息
				</view>
				<view class=" justify-between">
					<view class="popup-box-btn align-center justify-center" @click="moneyShow=false">
						取消
					</view>
					<view class="popup-box-btn-1 align-center justify-center"
						@tap="userSocial">
						{{'去完善'}}
					</view>
				</view>
		<!-- <view class="popup-box-cancel align-center justify-center" @click="moneyShow=false">
			<image class="close-popup" src="/static/images/starmap/close.svg" mode=""></image>
		</view> -->
		
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				current: 0,
				userInfo: {},
				moneyShow: false,
				hotList: [{
						url: '/static/images/mine/order-all.svg',
						title: '全部'
					},
					{
						url: '/static/images/mine/order-dai.svg',
						title: '待付款'
					},
					{
						url: '/static/images/mine/order-fa.svg',
						title: '待发货'
					},
					{
						url: '/static/images/mine/order-shou.svg',
						title: '待收货'
					},

				],

				appList: [{
						url: '/static/images/mine/yaoqing.svg',
						title: '邀请好友'
					},
					{
						url: '/static/images/mine/box-archive.svg',
						title: '我的保管箱'
					},
					// {
					// 	url: '/static/images/mine/add-location.svg',
					// 	title: '收货地址'
					// },
					{
						url: '/static/images/mine/name.svg',
						title: '实名认证'
					},
					// {
					// 	url: '/static/images/mine/bangzhu.svg',
					// 	title: '帮助中心'
					// },
					{
						url: '/static/images/mine/agent.svg',
						title: '店长中心'
					},

				]


			}
		},
		created() {
			this.getCardInfo()
		},
		methods: {
			userSocial(){
				this.moneyShow = false
				this.$navto('/pages/mine/setting/userSocial')
			},
			onTips() {
				this.$refs.uToast.show({
					message: '暂未开放'
				})
			},
			async getCardInfo() {
				let url = '/api/v1/my'
				let {
					code,
					msg,
					data
				} = await this.$getRequest(url)
				if (code == 200) {
					console.log(data, '静态资源');
					uni.setStorageSync('userInfo', data[0])
					this.userInfo = data[0]
				} else {
					this.$refs.uToast.show({
						message: msg
					})
				}
			},
			// 应用中心
			getCategory(value) {
				switch (value) {
					case 0:
						// 邀请好友
						this.$navto('/pages/mine/appCenter/inviteFriends')
						break;
					case 1:
						// 我的保管箱
						this.$navto('/pages/mine/appCenter/mySafeBox/mySafeBox')
						break;
					case 2:
						// 实名认证
						if (this.userInfo.auth == 1) {
							uni.showToast({
								icon: 'none',
								title: '已实名'
							})
						} else {
							this.$navto('/pages/mine/appCenter/userRealName')
						}
						break;
					case 3:
						// 店长中心
						if(this.userInfo.go_to_contact == 1){
							this.moneyShow = true
						}else{
							this.$navto('/pages/mine/appCenter/storeCenter/storeCenter')
						}
						break;
					default:
						break;
				}
			},
			myCopy(value) {
				let _this = this
				//提示模板
				uni.setClipboardData({
					data: value, //要被复制的内容
					showToast: false,
					success: () => { //复制成功的回调函数
						_this.$refs.uToast.show({
							message: '已复制',
							type: 'default',
							duration: '500'

						})
						// uni.showToast({ //提示
						// 	title: wxorqq == 'w' ? "微信号已复制" : 'QQ号已复制'
						// })
					}
				});
			},
			bannerTap() {
				// banner点击
			},
			bannerChange() {
				// banner改变
			},
			featureTap(e) {
				this.moneyShow = true
			}
		}
	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.big-box {
		background: url('/static/images/mine/my_bg.png') #16161e no-repeat top center / 100% 668rpx;
		padding: 0 32rpx 60rpx;
		.msg{
			position: relative;
		}
		.dot {
			position: absolute;
			width: 10rpx;
			height: 10rpx;
			top: 2rpx;
			right: -5rpx;
			background: red;
			border-radius: 50%;
		}
		.center-slot {
			margin-left: 30rpx;
			width: 48rpx;
			height: 48rpx;
		}

		.menu-box {
			margin-top: 46rpx;
			width: calc(100vw - 64rpx);
			position: relative;
			color: #fff;
			// background: linear-gradient(180deg, #1c3f50 0%, #1d2335 100%);
			border-radius: .5rem;
			z-index: 2;
			color: #fff;

			.jiantou {
				width: 35rpx;
				height: 35rpx;
			}

			.my-long {
				margin-right: 32rpx;
				border-radius: 16rpx;
				width: 120rpx;
				height: 120rpx;
			}

			.long-kuang-num {
				font-size: 40rpx;
				font-weight: 700;
				color: #fff;
			}

			.my-long-kuang {
				margin-top: 25rpx;
				color: rgba(255, 255, 255, .6);
				font-weight: 300;
				font-size: 26rpx;

				.copy-icon {
					width: 32rpx;
					height: 32rpx;
					margin-left: 5rpx;
				}
			}

		}


	}

	.egg-crystal {
		width: 100%;
		height: 184rpx;
		background-color: #20202c;
		padding: 0 0 0 32rpx;
		background: url('/static/images/mine/my_count-egg.png') no-repeat center center / 100% 100%;
		margin-bottom: 24rpx;

		.egg-crystal-box {
			flex: 1;
		}

		.egg-crystal-box1 {
			flex: 1;
			padding-left: 52rpx;
		}

		.my-long-dan {
			color: #FFFFFF99;
			font-size: 24rpx;
		}

		.dan-num {
			margin-top: 28rpx;
			font-size: 44rpx;
			color: #FFF;
		}

		.unit {
			margin-left: 15rpx;
			font-size: 24rpx;
			color: #FFFFFF99;
		}
	}

	.top-box {
		width: 100%;
		height: 184rpx;
		position: relative;
		margin: 76rpx auto 26rpx;
		padding: 26rpx 32rpx;
		background-color: #20202c;
		border-radius: 16rpx;

		.long-baby-box {
			position: absolute;
			bottom: 0;
			right: 20rpx;

			.long-baby {

				width: 232rpx;
				height: 232rpx;
			}
		}


		.my-qing-long {
			color: #FFFFFF99;
			font-size: 24rpx;
		}

		.long-num {
			margin-top: 20rpx;
			font-size: 64rpx;
			color: #27ff92;

			.unit {
				margin-left: 15rpx;
				font-size: 24rpx;
				color: #FFFFFF99;
			}
		}
	}

	.feature-app {
		height: 400rpx;
		width: 100%;
		padding: 46rpx 32rpx 0;
		margin-bottom: 24rpx;
		box-sizing: border-box;
		background-color: #20202c;
		border-radius: 16rpx;

		.set-name {
			font-size: 28rpx;
			color: #FFF;
		}

		.jiantou {
			width: 30rpx;
			height: 30rpx;
		}

		.feature-box-app {
			margin: 32rpx 0 32rpx;
			width: 155rpx;

			.open-map-icon {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 22rpx;
			}

			.title-order {
				font-size: 24rpx;
				color: #FFFFFFCC;
			}
		}

	}

	.feature {
		width: 100%;
		height: 260rpx;
		padding: 46rpx 32rpx 0;
		margin-bottom: 24rpx;
		box-sizing: border-box;
		background-color: #20202c;
		border-radius: 16rpx;

		.set-name {
			font-size: 28rpx;
			color: #FFF;
		}

		.jiantou {
			width: 30rpx;
			height: 30rpx;
		}

		.feature-box-app {
			margin-top: 32rpx;
			width: 155rpx;

			.open-map-icon {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 22rpx;
			}

			.title-order {
				font-size: 24rpx;
				color: #FFFFFFCC;
			}
		}

		.feature-box {
			flex: 1;
			margin-top: 32rpx;

			.open-map-icon {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 22rpx;
			}

			.title-order {
				font-size: 24rpx;
				color: #FFFFFFCC;
			}
		}

	}

	.popup-one-box {
		position: relative;
		z-index: 7;
		width: 560rpx;
		border-radius: 16rpx;
		background: #1D1D1D;
		padding: 48rpx 40rpx;
	
		.has-shuijing {
			width: 100%;
			height: 44rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			margin-bottom: 48rpx;
		}
	
		.shui-ji-num {
			font-size: 28rpx;
			color: #FFF;
			font-weight: 700;
		}
	
		.popup-box-btn {
			width: 227rpx;
			height: 72rpx;
			background: #252727;
			color: rgba(255, 255, 255, .4);
			font-size: 28rpx;
			border-radius: 8rpx;
		}
	
		.popup-box-btn-1 {
			width: 227rpx;
			height: 72rpx;
			background: #27FF92;
			color: #000;
			font-size: 28rpx;
			margin-left: 24rpx;
			border-radius: 8rpx;
		}
	
	
	
	
		.popup-kuangshi {
			width: 56rpx;
			height: 36rpx;
		}
	
	
	.popup-box-cancel {
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0);
		bottom: -120rpx;
	}
	
	.close-popup {
		width: 48rpx;
		height: 48rpx;
	}
	
	
	
	
	}
	
</style>